<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{ margin: 0; padding: 0;}
        body{ padding: 100px; background: #2b2b2b; color: #ffffff;}
    </style>
    <script src="nhn/jquery-latest.js"></script>
    <script>
        $(function(){
            var cntP = 0;
            var cntA = 0;

            $('#btn1').click(function(){
                $('ul').prepend('<li>Hello prepend' + ++cntP + '</li>');
                // $('<li>Hello prepend' + ++cntP + '</li>').prependTo($('ul'));
            });
            $('#btn2').click(function(){
                $('ul').append('<li>Hello append' + ++cntA + '</li>');
                // $('<li>Hello append' + ++cntA + '</li>').appendTo($('ul'));
            });
        });
    </script>
</head>
<body>
<section>
    <button id="btn1">prepend</button>
    <button id="btn2">append</button>

    <br/><br/>

    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
</section>
</body>
</html>